import React from 'react'

export default class Box extends React.Component {
  state = {
    count: 0
  }
  add = () => {
    // 改成回调函数形式就可以实现下面的setState的值依赖于上面的setState的值,回调中的形参state,表示最新的 state, props：表示最新的 props
    this.setState((state, props) => {
      return {
        count: state.count + 1
      }
    })
    // 这里的 state 就依赖上面 this.setState 返回的结果
    // setState(updater[, callback]),第二个参数是回调函数,表示在状态更新（页面完成重新渲染）后立即执行某个操作
    this.setState((state, props) => {
      return {
        count: state.count + 2
      }
    }, () => {
      console.log(this.state.count)
    })
  }
  render() {
    return (
      <div>
        <div>数字:{ this.state.count }</div>
        <button onClick={this.add}>add Count</button>
       </div>
    );
  }
}